<template>
    <div class="courcedetail">
        <!-- 导航 -->
        <Bar></Bar>
        <!-- 头部 -->
            <dl>
            <dd>
                <p style="fontSize:0.5rem;margin:0rem">{{list.title}}</p>
                <p style="color: orange;font-size: .448rem;">{{list.price}}</p>
                <!-- <p style="fontSize:0.3rem;color: #777;margin:0.15rem 0rem">共点击量{{list.sales_num}}</p>   {{list.price}}      -->
               <p class="ite-bot"> 
                        <span style="fontSize:0.5rem;color: #777;">
                            共{{list.is_free}}课时|{{list.browse_num-list.real_sales_num}}人报名</span> 
               </p>
            </dd>
        </dl>
          
          <div class="ul">
               <p  style="fontSize:0.5rem;color: #000;">教学团队</p>
                <ul>
            <li v-for="item in teachers" :key="item.teacher_id">
                  <img :src="item.teacher_avatar" alt="">
         
               <p>{{item.teacher_name}}</p>
         
            </li>
        </ul>
          </div>
          <div class="introduce">
               <p  style="fontSize:0.5rem;color: #000;">课程介绍</p>
             <div>
                 {{list.course_statement}}
             </div>
          </div>
          <div class="introduce">  <p  style="fontSize:0.5rem;color: #000;">课程大纲</p>
             <div>
                 {{list.course_statement}}
             </div>
             </div>
       <van-button type="primary" color='#eb6100' block>立即报名</van-button>
   
   
    </div>
</template>

<script>
import Bar from "../Bar.vue";
import { ClassDetail } from "../../Request/http.js";
export default {
  components: { Bar },
  name: "EverydayCourceDetai",

  data() {
    return {
      list: [],
      teachers: [],
    

    };
  },

  mounted() {
    this.apply();
  },

  methods: {
    apply() {
      ClassDetail(this.$route.query.id).then(res => {
        console.log(res);
        this.list = res.info;
        this.teachers = res.teachers;
        
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.courcedetail{
    width: 100%;
    height: 25rem;
}
.ul{
       background-color: #fff;
       p{padding:.3rem 0 0 .3rem;
           margin: 0;
       }
ul {
  display: flex;
  li {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 0.267rem 0.427rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.373rem;
    line-height: 0.64rem;
    background-color: #fff;
    border-bottom: 0.373rem solid rgb(242, 243, 245);
    text-align: center;
    img {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      margin-left: 0.3125rem;
    }
    
  }
}
}

dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  dd {
    margin: 0rem;
    padding: 0.5rem;
    position: relative;
    color: #323233;
    font-size: 0.373rem;
    line-height: 0.64rem;
    background-color: #fff;
    border-bottom: 0.373rem solid rgb(242, 243, 245);
    img {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
    }
    .ite-bot {
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
.introduce{
    padding: .3rem;
    background-color: #fff;
    margin-bottom: .5rem;
    p{
        margin: 0;
        
        padding-bottom: .5rem;
    }
    div{
        font-size: .35rem
    }
}
.van-button{
    position: fixed;
    bottom: 0;
    left: 0;
}
</style>